import { toggleTheme } from "@pureadmin/theme/dist/browser-utils";
import { defineStore } from "pinia";
import { pinia } from "..";
import { GlobalStoreEnum } from "../enum";
import { IAppState, IPages, ISetting, ISidebar, ITheme } from "../interface";
import { darken, getThemeColors, lighten } from "../util/store.util";

export const useApp = defineStore(GlobalStoreEnum.APP, {
  state: (): IAppState => ({
    hiddenTabs: false,
    sidebar: {
      opened: true,
      withoutAnimation: false,
      isClickCollapse: false
    },
    fixedHeader: true,
    layout: "mix",
    device: "desktop",
    theme: {
      name: "default",
      color: "#409EFF",
      darkMode: false
    },
    pages: {
      grey: false,
      weak: false,
      hideTabs: false,
      hideFooter: false,
      showLogo: true,
      showModel: "card"
    }
  }),

  getters: {
    getHiddenTabs(state) {
      return state.hiddenTabs;
    },
    getFixedHeader(state) {
      return state.fixedHeader;
    },
    getSidebar(state) {
      return state.sidebar;
    },
    isMix(state) {
      return state.layout === "mix";
    },
    isVertical(state) {
      return state.layout === "vertical";
    },
    isHorizontal(state) {
      return state.layout === "horizontal";
    },
    isMobile(state) {
      return state.device === "mobile";
    },
    getLayout(state) {
      return state.layout;
    },
    getDevice(state) {
      return state.device;
    },
    getTheme(state) {
      return state.theme;
    },
    getPages(state) {
      return state.pages;
    },
    isVerticalBar(state) {
      return ["vertical", "mix"].includes(state.layout);
    }
  },

  actions: {
    setAsyncData(
      layout: "vertical" | "mix" | "horizontal",
      setting: Partial<ISetting>
    ) {
      Object.keys(setting).forEach(k => {
        // eslint-disable-next-line no-prototype-builtins
        if (this.theme?.hasOwnProperty(k)) {
          this.theme[k] = setting[k];
        }
        // eslint-disable-next-line no-prototype-builtins
        if (this.pages?.hasOwnProperty(k)) {
          this.pages[k] = setting[k];
        }
      });
      this.setLayout(layout);
    },
    setHiddenTabs(hiddenTabs: boolean) {
      this.hiddenTabs = hiddenTabs;
    },

    setLayout(data: "vertical" | "mix" | "horizontal") {
      this.layout = data;
      window.document.body.setAttribute("layout", this.layout);
    },
    setTheme(data: Partial<ITheme>) {
      Object.keys(data).forEach(k => {
        this.theme[k] = data[k];
      });
    },
    setSidebar(data: Partial<ISidebar>) {
      Object.keys(data).forEach(k => {
        this.sidebar[k] = data[k];
      });
    },
    setPages(data: Partial<IPages>) {
      Object.keys(data).forEach(k => {
        this.pages[k] = data[k];
      });
    },
    toggleSideBar(opened?: boolean, resize?: string) {
      if (opened && resize) {
        this.sidebar.withoutAnimation = true;
        this.sidebar.opened = true;
      } else if (!opened && resize) {
        this.sidebar.withoutAnimation = true;
        this.sidebar.opened = false;
      } else if (!opened && !resize) {
        this.sidebar.withoutAnimation = false;
        this.sidebar.opened = !this.sidebar.opened;
        this.sidebar.isClickCollapse = !this.sidebar.opened;
      }
    },

    setThemeLayout(name: string) {
      const { darkMode } = this.getTheme as ITheme;
      const setEpThemeColor = (color: string) => {
        this.setTheme({ color, name });
        document.documentElement.style.setProperty("--el-color-primary", color);
        for (let i = 1; i <= 2; i++) {
          setPropertyPrimary("dark", i, color);
        }
        for (let i = 1; i <= 9; i++) {
          setPropertyPrimary("light", i, color);
        }
      };
      const setPropertyPrimary = (mode: string, i: number, color: string) => {
        document.documentElement.style.setProperty(
          `--el-color-primary-${mode}-${i}`,
          darkMode ? darken(color, i / 10) : lighten(color, i / 10)
        );
      };
      const clsList = document.documentElement.classList;
      if (darkMode) {
        if (!clsList.contains("dark")) {
          clsList.add("dark");
        }
      } else {
        if (clsList.contains("dark")) {
          clsList.remove("dark");
        }
      }
      toggleTheme({
        scopeName: `layout-theme-${name}`
      });
      if (name === "default" || name === "light") {
        setEpThemeColor("#409EFF");
      } else {
        const colors = getThemeColors().value.find(v => v.themeColor === name);
        setEpThemeColor(colors.color);
      }
    }
  }
});

export const useAppHooks = () => {
  return useApp(pinia);
};
